/*
 * @Author: sunday
 * @Date: 2020-07-15 09:15:36
 * @LastEditors: sunday
 * @LastEditTime: 2020-08-24 10:37:36
 * @Description: 大量数据的图表
 */
var device_width = $(window).width();

//分割数组方式1 每N个一组
var spArray = function (N, Q) {
  var R = [],
    F;
  for (F = 0; F < Q.length;) {
    R.push(Q.slice(F, F += N))
  }
  return R
}
//分割数组方式2 固定第一个
var spArray2 = function (N, Q) {
  var R = [],
    F;
  var new_arr = [];
  for (F = 0; F < Q.length;) {
    R.push(Q.slice(F, F += N))
  }
  for (var key in R) {
    if (key == 0) {
      new_arr.push(R[key])
    } else {
      R[key].unshift(Q[0])
      new_arr.push(R[key])
    }
  }

  return R
}
//数组分割方式3 按顺序分割
var spArray3 = function (N, Q) {
  var R = [],
    F;
  var new_arr = [];
  for (F = 0; F < Q.length; F++) {
    if (F <= Q.length - N) {
      R.push(Q.slice(F, F + N))
    }
  }
  return R
}

//chart_bar_1
var chart_bar_1 = function (pxdata, pydata) {
  var myChart = echarts.init(document.getElementById('bar-1'));
  var xdata = pxdata || S_mock.xdata(1, 60, '单位');
  var ydata = pydata || S_mock.array(xdata.length, 10, 100);
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '2%',
      top: "22%",
      right: '4%',
      bottom: '14%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },
    dataZoom: [{
      type: 'inside',
      xAxisIndex: [0],
      start: 1,
      end: 20
    }, {
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'empty',
      showDataShadow: false,
      fillerColor: '#3196fa',
      height: getSize(0.4),
      bottom: '3%',
      labelFormatter: function (value) {
        return '';
      },
      //  handleSize:0
    }],
    xAxis: [{
      nameLocation: "start",
      nameTextStyle: {
        color: "#fff",
      },
      nameGap: '1',
      type: 'category',
      data: xdata,
      axisLabel: {
        interval: 'auto',
        color: "#fff",
        fontSize: getSize(0.2),
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#579dff",
        }
      },
      axisTick: {
        show: false
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: false,
      },
    }],
    yAxis: [{
      // show:false,
      type: 'value',
      name: '单位：万人次',
      nameTextStyle: {
        color: "#fff",
        fontSize: getSize(0.24),
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontSize: getSize(0.24),
      },
      max: 100, //设置最大值
      min: 0,
      splitNumber: 5,
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: true,
        lineStyle: {
          color: '#10447C',
          opacity: 1,
          width: 1,
          type: 'solid',
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#579dff",
        }
      },
      axisTick: {
        show: false
      },
    }],
    series: [{
      type: 'bar',
      barGap: 0,
      barWidth: "40%",
      label: {
        show: false,
        position: 'top',
        color: '#facc14'
      },

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: '#01F1FC'
              },
              {
                offset: 1,
                color: '#1B729E'
              }
            ]
          )
        },
      },
      data: ydata
    }, ]
  };
  myChart.setOption(option);

  function auto_slide(start, end, pstep, time) {
    var step = pstep;
    setInterval(function () {
      if (option.dataZoom[0].end >= 100) {
        option.dataZoom[0].start = start;
        option.dataZoom[0].end = end;
      } else {
        option.dataZoom[0].start = option.dataZoom[0].start + step;
        option.dataZoom[0].end = option.dataZoom[0].end + step;
      }
      myChart.setOption(option);
    }, time);
  }
  // auto_slide(1, 20, 1, 1000);
}

//chart_bar_2
var chart_bar_2 = function (pxdata, pydata) {
  var myChart = echarts.init(document.getElementById('bar-2'));
  var xdata = pxdata || S_mock.xdata(1, 43, '单位')
  var ydata = pydata || S_mock.array(xdata.length, 90, 100);
  var data_zom_end = parseInt(4 / xdata.length * 100);
  //分割数组
  var sp_xdata = spArray(5, xdata);
  var sp_ydata = spArray(5, ydata);
  var sp_data_length = sp_xdata.length;

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'none' // 默认为直线，可选为：'line' | 'shadow'
      },
      // formatter: '{b}<br/><i class="chart_point"></i>{c}%'
    },
    color: ['#3D58BF'],
    grid: {
      left: '2%',
      top: "22%",
      right: '4%',
      bottom: '10%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },
    dataZoom: [{
      type: 'inside',
      xAxisIndex: [0],
      start: 0,
      end: data_zom_end
    }, {
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'empty',
      showDataShadow: false,
      fillerColor: '#3196fa',
      height: getSize(0.2),
      bottom: '3%',
      backgroundColor: '#243B5F',
      borderColor: 'transparent',
      labelFormatter: function (value) {
        return '';
      },
      //  handleSize:0
    }],
    xAxis: [{
      nameLocation: "start",
      nameTextStyle: {
        color: "#fff",
      },
      nameGap: '1',
      type: 'category',
      data: xdata,
      // data: sp_xdata[0],
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontSize: getSize(0.32),
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#293B76",
        }
      },
      axisTick: {
        show: false
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: false,
      },
    }],
    yAxis: [{
      // show:false,
      type: 'value',
      name: '',
      nameTextStyle: {
        color: "#fff",
        fontSize: getSize(0.24),
      },
      axisLabel: {
        interval: 0,
        color: "#71737D",
        fontSize: getSize(0.34),
        formatter: '{value}%'
      },
      max: 100,
      min: 0,
      splitNumber: 3,
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: true,
        lineStyle: {
          color: '#293B76',
          opacity: 1,
          width: 1,
          type: 'solid',
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#293B76",
        }
      },
      axisTick: {
        show: false
      },
    }],
    series: [{
      type: 'pictorialBar',
      barWidth: getSize(1.4),
      barMaxWidth: getSize(1.4),
      barGap: 0,
      symbol: 'image://./assets/img/chart-bar.png',
      symbolSize: ['100%', '100%'],
      symbolRepeat: false,
      label: {
        show: true,
        position: 'top',
        formatter: '{c}%',
        fontSize: getSize(0.36),
        color: '#FFE66D'
      },
      data: ydata
      // data: sp_ydata[0]
    }, ]
  };
  myChart.setOption(option);
  var global_start = 0;
  var global_end = data_zom_end;
  var modalIsopen = false;
  var timer;

  function auto_slide(start, end, pstep, time, pflag) {
    clearInterval(timer);
    var step = pstep;
    var flag = pflag;
    if (flag) {
      timer = setInterval(function () {
        console.log('触发定时器');
        if (option.dataZoom[0].start >= 100 || option.dataZoom[0].end >= 100) {
          option.dataZoom[0].start = 0;
          option.dataZoom[0].end = data_zom_end;
          global_start = 0;
          global_end = data_zom_end;
        } else {
          if (option.dataZoom[0].end + step >= 100) {
            option.dataZoom[0].start = 100 - parseInt(4 / xdata.length * 100);
            option.dataZoom[0].end = 100;
            global_start = 100 - parseInt(4 / xdata.length * 100);
            global_end = 100;
          } else {
            option.dataZoom[0].start = option.dataZoom[0].start + step;
            option.dataZoom[0].end = option.dataZoom[0].end + step;
            global_start = option.dataZoom[0].start;
            global_end = option.dataZoom[0].end;
          }
        }

        myChart.setOption(option);
        // console.log('轮播start;', option.dataZoom[0].start);
        // console.log('轮播end;', option.dataZoom[0].end);
      }, time);
    } else {
      clearInterval(timer);
      console.log('暂停了');
      console.log('start', start);
      console.log('end', end);
      option.dataZoom[0].start = start;
      option.dataZoom[0].end = end;
      global_start = start;
      global_end = end;
    }

  }
  //初始化调用一次
  // start_slide();
  auto_slide(0, data_zom_end, parseInt(6 / xdata.length * 100), 5000, true);

  function pause_slide(params) {
    auto_slide(global_start, global_end, parseInt(6 / xdata.length * 100), 5000, false);
  }

  function start_slide(params) {
    auto_slide(global_start, global_end, parseInt(6 / xdata.length * 100), 5000, true);
  }
  //监听滚动条拖到
  var yanchi_timer;
  myChart.on('datazoom', function (params) {
    console.log('滚动条触发');
    if (params.start) {
      var change_start = params.start;
      var change_end = params.end;
    } else {
      var change_start = params.batch[0].start;
      var change_end = params.batch[0].end;
    }
    auto_slide(change_start, change_end, parseInt(6 / xdata.length * 100), 5000, false);
    clearTimeout(yanchi_timer);
    yanchi_timer = setTimeout(function () {
      auto_slide(change_start, change_end, parseInt(6 / xdata.length * 100), 5000, true);
    }, 1000);
  })

  function auto_change_data(time) {
    var idx = 0;
    setInterval(function () {
      if (idx == sp_data_length - 1) {
        idx = 0;
      } else {
        idx++;
      }
      option.xAxis[0].data = sp_xdata[idx];
      option.series[0].data = sp_ydata[idx];
      myChart.setOption(option);
    }, time);
  }
  //每10秒切换一次
  // auto_change_data(10000);

  //鼠标悬浮暂停轮播
  myChart.on('mouseover', function (param) {
    // console.log('移入-global_start', global_start);
    // console.log('移入-global_end', global_end);
    pause_slide();
  });
  myChart.on('mouseout', function (param) {
    // console.log('离开-global_start', global_start);
    // console.log('离开-global_end', global_end);
    start_slide();
  })
}

//chart_bar_3
var chart_bar_3 = function (pxdata, pydata, unit) {
  var myChart = echarts.init(document.getElementById('chart_bar_3'));
  var xdata = pxdata || S_mock.xdata(2010, 2020, '');
  var ydata = pydata || S_mock.array(xdata.length, 100, 160);
  var dw = unit || '万元';
  var data_zom_end = parseInt(5 / xdata.length * 100);
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '2%',
      top: "18%",
      right: '4%',
      bottom: '18%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },
    xAxis: [{
      nameLocation: "start",
      nameTextStyle: {
        color: "#fff",
      },
      nameGap: '1',
      type: 'category',
      data: xdata,
      axisLabel: {
        interval: 0,
        color: "#ccc",
        fontSize: getSize(0.27),
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#579dff",
        }
      },
      axisTick: {
        show: false
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: false,
      },
    }],
    yAxis: [{
      // show:false,
      type: 'value',
      name: '(' + dw + ')',
      nameTextStyle: {
        color: "#ccc",
        fontSize: getSize(0.27),
        padding: [0, 0, 0, -getSize(0.5)]
      },
      axisLabel: {
        show: true,
        interval: 2,
        color: "#ccc",
        fontSize: getSize(0.27),
      },
      splitNumber: 5,
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: true,
        lineStyle: {
          color: '#00375E',
          opacity: 1,
          width: 1,
          type: 'dashed',
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#579dff",
        }
      },
      axisTick: {
        show: false
      },
    }],
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: data_zom_end
    }, {
      start: 0,
      end: data_zom_end,
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      handleSize: '80%',
      handleStyle: {
        color: '#fff',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      textStyle: {
        color: '#fff'
      }
    }],
    series: [{
      type: 'pictorialBar',
      barWidth: '30%',
      barGap: 0,
      symbol: 'image://./assets/img/bar-bg.png',
      symbolSize: ['100%', '100%'],
      symbolRepeat: false,
      label: {
        show: true,
        position: 'top',
        backgroundColor: '#000',
        borderWidth: 1,
        borderColor: '#15D0FF',
        borderRadius: 3,
        padding: [5, 5, 3, 5],
        formatter: function (para) {
          return '{a|}' + '{b| ' + para.value + ' }' + '{c|' + dw + '}'
        },
        rich: {
          a: {
            width: getSize(0.12),
            height: getSize(0.12),
            backgroundColor: '#FAF306',
            borderRadius: getSize(0.12),
            shadowColor: '#ccc',
            shadowBlur: 5,
          },
          b: {
            fontSize: getSize(0.22),
            color: '#FAF306',
          },
          c: {
            fontSize: getSize(0.16),
            color: '#FAF306',
          },
        }
      },

      // symbolSize: 6,
      itemStyle: { //折线拐点标志的样式。
        normal: {
          color: "#21CEE1",
        }
      },
      data: ydata
    }, ]
  };
  myChart.setOption(option);
}

//chart_bar_4
var chart_bar_4 = function (pxdata, pydata1, unit) {
  var myChart = echarts.init(document.getElementById('chart_bar_4'));
  var nameArr = pxdata || S_mock.xdata(1, 25, '单位');
  var dataArr = pydata1 || S_mock.array(nameArr.length, 50, 90);
  var max_val = Math.max.apply(null, dataArr);
  var dw = unit || '万元';
  var ydata_cov = [];
  for (var key in dataArr) {
    if (key % 2 == 0) {
      ydata_cov.push({
        value: dataArr[key],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0, //// 0% 处的颜色
              color: 'rgba(51, 221, 248, 0.21)'
            },
            {
              offset: 1,
              color: 'rgba(51, 221, 248, 1)'
            }
          ], false)
        },
      })
    } else {
      ydata_cov.push({
        value: dataArr[key],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0, //// 0% 处的颜色
              color: 'rgba(36, 115, 239, 0.21)'
            },
            {
              offset: 1,
              color: 'rgba(36, 115, 239, 1)'
            }
          ], false)
        },
      })
    }

  }
  //分割数组
  var sp_xdata = spArray3(4, nameArr);
  var sp_ydata = spArray3(4, ydata_cov);
  var sp_data_length = sp_xdata.length;

  var option = {
    grid: {
      top: '8%',
      bottom: '8%',
      left: '5%',
      right: '18%',
      containLabel: true,
    },
    tooltip: {
      // show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        lineStyle: {
          color: '#39627d'
        }
      },
      // formatter: '{b} {c}家'
      // formatter: '{b0}: <br /> {a0}:{c0}人<br />{a1}:{c1}人'
    },
    yAxis: [{
      type: 'category',
      zlevel: 1,
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: false,
        lineStyle: {
          color: '#6b85a3'
        }
      },
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#3196FA'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        fontSize: getSize(0.28),
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
      inverse: true,
      data: sp_xdata[0]
    }],
    xAxis: [{
      type: 'value',
      position: 'top',
      name: '单位(' + dw + ')',
      nameTextStyle: {
        color: '#fff',
        fontSize: getSize(0.24),
        padding: [0, 0, getSize(0.5), 0]
      },
      boundaryGap: true,
      splitLine: { //坐标轴在 grid 区域中的分隔线
        show: false,
        lineStyle: {
          color: '#6b85a3'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#00A1FF'
        },
      },
      axisLabel: {
        show: true,
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
    }],
    series: [{
      name: '',
      type: 'bar',
      barGap: 0,
      stack: 'a',
      barWidth: '30%',
      itemStyle: {
        barBorderRadius: [0, getSize(0.1), getSize(0.1), 0],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0, //// 0% 处的颜色
            color: '#3196FA'
          },
          {
            offset: 1,
            color: '#31CDFA'
          }
        ], false),
      },
      label: {
        show: true,
        position: 'right',
        color: '#FAF306',
        fontSize: getSize(0.24)
      },
      data: sp_ydata[0]
    }],
    animationDurationUpdate: 2000
  };
  myChart.setOption(option);

  function auto_change_data(time) {
    var idx = 0;
    setInterval(function () {
      if (idx == sp_data_length - 1) {
        idx = 0;
      } else {
        idx++;
      }
      option.yAxis[0].data = sp_xdata[idx];
      option.series[0].data = sp_ydata[idx];
      myChart.setOption(option);
    }, time);
  }
  //每5秒切换一次
  auto_change_data(5000);
}